<template>
  <div class="image-loader-container">
    <img v-if="!everythingDone" class="placeholder" :src="placeholder" alt="" >
    <img @load="handleLoad" :src="src" alt="" :style="{opacity: originOpacity, transition: `${duration}ms`}">
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      required: true,
    },
    placeholder: {
      type: String,
      required: true,
    },
    duration: {
      type: Number,
      default: 1000,
    }
  },
  data() {
    return {
      originLoaded: false,
      everythingDone: false,
    }
  },
  computed: {
    originOpacity() {
      return this.originLoaded ? 1 : 0;
    }
  },
  methods: {
    handleLoad() {
      this.originLoaded = true;
      setTimeout(() => {
        this.everythingDone = true;
        this.$emit("load");
      },this.duration)
    }
  }
}
</script>

<style scoped lang="less">
@import "~@/styles/mixin.less";
  .image-loader-container {
    width: 100%;
    height: 100%;
    img{
      .self-fill();
      object-fit: cover;
      &.placeholder{
        filter: blur(2vw);
      }
    }
    
  }
</style>